<template>
  <div class="work">
    <p class="detail-tip">
      工作经历<span v-if="showView && !isStatic" @click="addList">添加</span>
    </p>
    <div class="com-container" v-if="showView">
      <div class="show-item" v-for="(v, i) in list" :key="v.id">
        <span class="company">{{ v.comname }}</span>
        <span class="pos">{{ v.job }}</span>
        <span class="time" v-if="v.start_time"
          >{{ v.start_time }} 至 {{ v.end_time || '至今' }}</span
        >
        <p class="btn-wrap" v-if="!isStatic && list.length !== 0">
          <span class="edit" @click="toEdit(v)">编辑</span>
          <span class="delete" @click="toDelete(i)">删除</span>
        </p>
        <div class="content">{{ v.wdesc }}</div>
      </div>
    </div>
    <div class="com-form" v-else>
      <div class="postForm">
        <div class="form-item">
          <div class="text" required>公司:</div>
          <div class="input">
            <input
              v-model="edit.comname"
              type="text"
              placeholder="请输入公司"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>职位:</div>
          <div class="input">
            <input v-model="edit.job" type="text" placeholder="请输入职位" />
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>开始日期:</div>
          <div class="select">
            <client-only>
              <el-date-picker
                v-model="edit.start_time"
                type="month"
                value-format="yyyy-MM"
                placeholder="开始日期"
              >
              </el-date-picker>
            </client-only>
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>结束日期:</div>
          <div class="select small">
            <client-only>
              <label @click="toCheck(1)">
                <span class="checkbox" v-show="checked === 1">
                  <i class="el-icon-check"></i>
                </span>
                <span class="checkbox" v-show="checked !== 1">&nbsp;</span>
                <el-date-picker
                  v-model="edit.end_time"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="结束日期"
                />
              </label>
              <label @click="toCheck(2)">
                <span class="checkbox" v-show="checked === 2">
                  <i class="el-icon-check"></i>
                </span>
                <span class="checkbox" v-show="checked !== 2">&nbsp;</span>
                <span>至今</span>
              </label>
            </client-only>
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>工作内容:</div>
          <div class="textarea">
            <textarea
              v-model="edit.wdesc"
              maxlength="700"
              placeholder="请输入工作内容"
            />
            <p class="count">
              你还可以输入<span>{{ textCount }}</span
              >字
            </p>
          </div>
        </div>
        <div class="submit">
          <button class="confirm" type="button" @click="submit">保存</button>
          <button class="cancel" type="button" @click="cancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { updateResume } from '@/api/users';
export default {
  props: ['workList', 'isStatic'],
  data () {
    return {
      showView: true,
      list: [],
      edit: {},
      checked: null,
      textCount: 700,
    }
  },
  watch: {
    'edit.wdesc' (val) {
      this.textCount = 700 - val.length;
    },
    workList (val) {
      this.list = val;
    }
  },
  created () {
    this.list = this.workList || [];
  },
  mounted () {
  },
  methods: {
    addList () {
      this.list.push({
        id: 'work' + this.list.length,
        comname: '',
        job: '',
        wdesc: '',
        start_time: '',
        end_time: ''
      });
      this.toEdit(this.list[this.list.length - 1])
    },
    toCheck (type) {
      if (type === 2) { this.edit.end_time = ''; }
      this.checked = type;
    },
    toggleView () {
      this.showView = false;
    },
    toEdit (obj) {
      if (obj.end_time === '' || obj.end_time === 'number') {
        this.checked = 2
      } else {
        this.checked = 1
      }
      if (typeof obj.end_time === 'number') { obj.end_time = '' }
      if (typeof obj.start_time === 'number') { obj.start_time = '' }
      this.edit = obj;
      this.showView = false;
    },
    toDelete (index) {
      this.list.splice(index, 1);
    },
    cancel () {
      this.showView = true;
    },
    submit () {
      this.checked === 2 && (this.edit.end_time = '');
      this.showView = true;
    //   const uid = this.$store.state.user.authUser.id;

    //   if (!uid) {
    //     this.$message.error('未获取到用ID,请重新登录！')
    //     return
    //   }
    //   const {
    //     comname,
    //     job,
    //     wdesc,
    //     start_time,
    //     end_time
    //   } = this.edit;
    //   let objParams = [{
    //     comname,
    //     job,
    //     wdesc,
    //     start_time,
    //     end_time
    //   }];
    //   objParams = JSON.stringify(objParams);
    //   updateResume({
    //     uid,
    //     work: objParams
    //   }).then(res => {
    //     if (res.code === 200) {
    //       this.showView = true;
    //       this.$message.success(res.msg || '保存成功！');
    //     } else {
    //       this.$message.error(res.msg || '网络错误, 稍后再试！');
    //     }
    //   }).catch(err => {
    //     console.log(err)
    //     this.$message.error(err || '网络错误, 稍后再试！');
    //   })
    },
  }
}
</script>
<style lang="scss" scoped>
.work {
  position: relative;
  .show-item {
    line-height: 40px;
    padding-left: 30px;
    margin-bottom: 20px;
    & > span {
      margin-right: 30px;
      display: inline-block;
    }
    .company {
      width: 300px;
    }
    .pos {
      width: 200px;
    }
    .content {
      padding: 0 30px 0 0;
      color: #999;
      font-size: 16px;
      line-height: 24px;
    }

    .btn-wrap {
      float: right;
      margin-right: 20px;
      span {
        margin-left: 20px;
      }
      .edit {
        color: $base-color;
        cursor: pointer;
        &:hover {
          color: $base-color-hover;
        }
      }
      .delete {
        color: $base-color-danger;
        cursor: pointer;
        &:hover {
          color: $base-color-important;
        }
      }
    }
  }
  .com-form {
    padding: 30px 0;
    .postForm {
      width: 500px;
      margin: 0 auto;
      .form-item {
        margin-bottom: 10px;
        line-height: 40px;
        & > div {
          display: inline-block;
        }
        & > .text {
          position: relative;
          padding-left: 20px;
          min-width: 120px;
          color: #24292f;
          vertical-align: top;
          &[required] {
            &::before {
              content: '*';
              position: absolute;
              left: 0px;
              top: 0px;
              color: $base-color-danger;
            }
          }
        }
        .input {
          input {
            line-height: 28px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 0 10px;
            width: 350px;
            font-size: 16px;
            &:active,
            &:focus {
              border-color: $base-color;
            }
          }
        }
        label {
          margin-right: 30px;
          cursor: pointer;
        }
        .select {
          .el-input {
            width: 100%;
          }
          ::v-deep .el-input__inner {
            width: 350px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            font-size: 16px;
            color: #24292f;
            padding-right: 10px;
            &:active,
            &:focus {
              border-color: $base-color;
            }
          }
          &.small {
            .el-input {
              width: 150px;
              display: inline-block;
            }
            ::v-deep .el-input__inner {
              width: 150px;
              padding-right: 20px;
              margin-right: 20px;
            }
            ::v-deep .el-input__suffix {
              right: 20px;
            }
          }
        }
        .textarea {
          margin-top: 10px;
          textarea {
            resize: none;
            height: 140px;
            width: 360px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            color: #24292f;
            font-size: 16px;
            &:active,
            &:focus {
              border-color: $base-color;
            }
          }
          .count {
            text-align: right;
            span {
              color: $base-color;
              margin: 0 5px;
            }
          }
        }
      }
    }
  }
}
</style>
